<template>
  <div>
    <el-row>
      <el-page-header @back="goBack" content="历史数据"> </el-page-header>
    </el-row>
    <!-- <el-row class="top" type="flex" justify="start">
      <el-col :span="1">
        <el-checkbox
          @change="onAllSelectDeviceCode"
          label="全选"
          v-model="allSelectDeviceCheck"
          name="type"
        ></el-checkbox>
      </el-col>
      <el-col :span="2" v-for="dev in devices" :key="dev.deviceCode">
        <el-checkbox
          :label="dev.deviceCode"
          name="type"
          v-model="dev.checked"
          @change="onSelectDeviceCode"
        ></el-checkbox>
      </el-col>
    </el-row> -->
    <el-row class="top" type="flex" justify="start">
      <el-col :span="24">
        <el-form
          :inline="true"
          :model="tagHistorySearchForm"
          class="align-left"
        >
          <el-form-item label="设备编号">
            <el-select
              v-model="deviceCodeOption"
              placeholder="设备编号"
            >
              <el-option label="全部" value=""></el-option>
              <el-option 
                :value="dev.deviceCode" 
                v-for="dev in devices" 
                :key="dev.deviceCode">{{dev.deviceCode}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="查询时间">
            <el-date-picker
              v-model="searchTimeBetween"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onTagHistorySearchSubmit"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onTagHistoryExcelExport"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="tagHistorys" stripe style="width: 100%">
          <el-table-column
            prop="tagType"
            label="标签类型"
            width="180"
          ></el-table-column>
          <el-table-column prop="createTime" label="时间" width="180">
          </el-table-column>
          <el-table-column prop="deviceCode" label="设备编号" width="180">
          </el-table-column>
          <el-table-column prop="tagId" label="卡号"> </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg device-list-pagination" justify="end">
      <el-pagination
        background
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100]"
        :page-size="pageSize"
        :total="pageTotal"
        prev-text="上一页"
        next-text="下一页"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import qs from "qs";
import deviceApi from "@/api/device";
import tagHistoryApi from "@/api/tag-history";
export default {
  name: "HistoryData",
  data() {
    return {
      currentPage: 1, //默认显示页面为1
      pageSize: 20, //    每页的数据条数
      pageTotal: 1,
      searchTimeBetween: null,
      selectedDevices: [],
      allSelectDeviceCheck: false,
      devices: [],
      tagHistorySearchForm: {},
      tagHistorys: [],
      deviceCodeOption:null,
    };
  },
  mounted() {
    this.getDeives();
    this.getTagHistorys();
  },
  methods: {
    onAllSelectDeviceCode() {
      let root = this;
      this.devices.forEach((item) => {
        item.checked = root.allSelectDeviceCheck;
      });
    },
    onSelectDeviceCode() {},
    onTagHistoryExcelExport() {
      this.$message({
        message: "正在导出数据，请勿执行其它操作",
        type: "success",
      });
      let param = {
        page: 1,
        size: 9999999,
      };
      if (this.searchTimeBetween) {
        param["startTime"] = this.changeTimestyle(this.searchTimeBetween[0]);
        param["endTime"] = this.changeTimestyle(this.searchTimeBetween[1]);
      }
      this.selectedDevices = [];
      this.devices.forEach((item) => {
        if (item.checked) {
          this.selectedDevices.push(item.deviceCode);
        }
      });
      if(this.deviceCodeOption){
        this.selectedDevices.push(this.deviceCodeOption);
      }
      if (this.selectedDevices.length > 0) {
        param["deviceCode"] = this.selectedDevices;
      }
      param = qs.stringify(param, { arrayFormat: "repeat" });
      let url =
       //"http://" + window.location.host + "/api/tags-history/exportExcel?" + param;
        //开发环境用上一行,打包到eclipse用下一行
        "http://" + window.location.host + "/tags-history/exportExcel?" + param;
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", "历史数据.xlsx");

      document.body.appendChild(link);
      link.click();
    },
    onTagHistorySearchSubmit() {
      this.getTagHistorys();
    },
    goBack() {
      window.history.back();
    },
    //每页下拉显示数据
    handleSizeChange: function (size) {
      this.pageSize = size;
      this.getTagHistorys();
    },
    //点击第几页
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.getTagHistorys();
    },
    getDeives() {
      let param = {
        page: 0,
        size: 99999,
      };
      deviceApi.getDevices(param).then((response) => {
        if (response.data) {
          this.devices = response.data.content;
        }
      });
    },
    changeTimestyle(oldtime) {
      // 时间转换
      var datejson = new Date(oldtime).toJSON();
      var date = new Date(+new Date(datejson) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      return date;
    },
    getTagHistorys() {
      let param = {
        page: this.currentPage - 1,
        size: this.pageSize,
      };
      if (this.searchTimeBetween) {
        param["startTime"] = this.changeTimestyle(this.searchTimeBetween[0]);
        param["endTime"] = this.changeTimestyle(this.searchTimeBetween[1]);
      }
      this.selectedDevices = [];
      // this.devices.forEach((item) => {
      //   if (item.checked) {
      //     this.selectedDevices.push(item.deviceCode);
      //   }
      // });
      if(this.deviceCodeOption){
        this.selectedDevices.push(this.deviceCodeOption);
      }
      if (this.selectedDevices.length > 0) {
        param["deviceCode"] = this.selectedDevices;
      }
      param = qs.stringify(param, { arrayFormat: "repeat" });
      tagHistoryApi.getTagHistorys(param).then((response) => {
        if (response.data) {
          this.tagHistorys = response.data.content;
          this.pageTotal = response.data.totalElements - 1;
          this.currentPage = response.data.pageable.pageNumber + 1;
        }
      });
    },
  },
};
</script>
<style>
.align-left {
  text-align: left;
}
.top {
  margin-top: 20px;
}
.device-list-charts {
  text-align: left;
  margin-top: 20px;
}
.device-list-pagination {
  margin-top: 30px;
}
</style>
